<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="align-center">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="数据源类型">
            <el-select v-model="form.dtype" placeholder="请选择数据源类型" style="margin-left: -230px; width:450px">
              <el-option label="Mysql" value="0"></el-option>
              <el-option label="Hive" value="1"></el-option>
              <el-option label="Hbase" value="2"></el-option>
              <el-option label="Clickhouse" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据源名称">
            <el-input v-model="form.dbname"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.userpassw"></el-input>
          </el-form-item>
          <el-form-item label="连接地址">
            <el-input v-model="form.dadress"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="test()">测试连接</el-button>
            <el-button type="primary" :disabled= isAdd @click="onSubmit">添 加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          name: "test",
          isAdd: true,
          form: {
            dbname: '',
            dtype: '',
            username: '',
            userpassw: '',
            dadress:''
          }
        }
      },
      methods: {

        onSubmit() {
          var _myvue = this
          this.$http.post('http://127.0.0.1:8091/datasource/insertDatasource',
            {
              "dname":this.form.dbname,
              "dtype":this.form.dtype,
              "username":this.form.username,
              "userpassw":this.form.userpassw,
              "dadress":this.form.dadress
            }
            ,{emulateJSON: true}).then((response) => {
              // if(response.bodyText = "success"){
                alert("添加成功")
            if(this.form.dtype == 0){
              _myvue.$router.push({name:'mysqllistdatasourceinfo',params:{}})
            }else if(this.form.dtype == 1){
              _myvue.$router.push({name:'hivelistdatasourceinfo',params:{}})
            }else if(this.form.dtype == 2){
              _myvue.$router.push({name:'hbaselistdatasourceinfo',params:{}})
            }else if (this.form.dtype == 3){
              _myvue.$router.push({name:'clickhouselistdatasourceinfo',params:{}})
            }

          });

         },
        test(){
          if(this.form.dbname == '' || this.form.dtype == '' || this.form.dadress == ''){
            alert('数据源类型、数据源名称、链接地址不能为空！！')
          }else{
            this.$http.post('http://127.0.0.1:8091/datasource/testConnetc',
              {   "dname":this.form.dbname,
                "dtype":this.form.dtype,
                "username":this.form.username,
                "userpassw":this.form.userpassw,
                "dadress":this.form.dadress
              }
              ,{emulateJSON: true}).then((response) => {
              debugger
              if(response.bodyText == "true"){
                alert("连接成功")
                this.isAdd = false
              }else{
                alert("连接失败")
              }

            });
          }
        }
       }
    }
</script>

<style type="text/css">
  .align-center{
    padding-left: 200px;
    padding-top: 50px;
    height: 600px;
    margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */
    width:800px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:white;     /* 背景色 */
  }
</style>
